/**
* 功能柱状图 / 菜单柱状图
*/

<template>
    <div class="device-bind-content" style="height: 415px">
        <div class="device-content">
            <div class="title">
                <span class="span-1">{{name}}</span>
            </div>
            <slot name="content"></slot>
            <div :class="{noSelect:this.name == '功能比例' || this.name == '火力比例'}">
                <div v-auto-resize style="height: 300px;"  ref="chartEl" class="chart-wrap" />
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import commonMixin from '@/mixins/common'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase, commonMixin],
  directives: {
    AutoResize
  },
  props: {
    percentChartData: {
      type: Array
    },
    name: {
      type: String
    }
  },
  watch: {
    percentChartData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(now)
        })
      }
    }
  },
  created () {
  },
  methods: {
    setOption (data) {
      let nameMap = {
        '重量比例': {
          name: 'weight',
          value: 'percentage'
        },
        '火力比例': {
          name: 'powerLevel',
          value: 'percentage'
        },
        '功能比例': {
          name: 'runMode',
          value: 'percentage'
        },
        '时间比例': {
          name: 'mode',
          value: 'use_ratio'
        }
      }
      let legendList = []
      let seriesData = []
      const key = this.name
      if (key !== '时间比例') {
        this._.each(data, (item) => {
          legendList.push(item[nameMap[key].name])
          let obj = {
            name: item[nameMap[key].name],
            value: String(item[nameMap[key].value]).substring(0, 4).replace(/%/g, ''),
            percentage: String(item[nameMap[key].value]).substring(0, 4)
          }
          seriesData.push(obj)
        })
      } else {
        let timeObject = {
          '1': '0~1分钟',
          '2': '1~3分钟',
          '3': '3~5分钟',
          '4': '5~10分钟',
          '5': '10分钟以上'

        }
        this._.each(data, (item) => {
          legendList.push(timeObject[item.part_number])
          let obj = {
            name: timeObject[item.part_number],
            value: String(item[nameMap[key].value]).substring(0, 4).replace(/%/g, ''),
            percentage: String(item[nameMap[key].value]).substring(0, 4)
          }
          seriesData.push(obj)
        })
      }

      let colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247']
      if (seriesData && seriesData.length === 0) {
        seriesData = [{
          name: '暂无数据',
          value: 100,
          percentage: 100
        }]
        legendList = ['暂无数据']
        colorList = ['#999999']
      }
      let option = {
        title: {
          textStyle: {
            fontSize: 20,
            color: '#212529',
            lineHeight: 20
          }

        },
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            let str = parms.name + '</br>' +
                        '占比：' + parms.percent + '%'
            return str
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '10%',
          top: 'center',
          itemGap: 30,
          icon: 'pin',
          data: legendList,
          textStyle: {
            color: '#77899c',
            rich: {
              uname: {
                width: 20
              },
              unum: {
                color: '#4ed139',
                width: 60,
                align: 'right'
              }
            }
          },
          formatter (name) {
            let percent
            for (let i = 0; i < seriesData.length; i++) {
              if (seriesData[i].name === name) {
                percent = seriesData[i].percentage
              }
            }
            name = name.length > 6 ? name.substring(0, 6) + '...' : name
            let arr = [name, percent + '%']
            return arr.join('--')
          }
        },
        color: colorList,
        series: [
          {
            type: 'pie',
            radius: [60, 90],
            center: ['40%', '50%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{text|{c}%}\n{b}',
                rich: {
                  text: {
                    align: 'center',
                    verticalAlign: 'middle',
                    padding: 8,
                    fontSize: 30
                  },
                  value: {
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: 20
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12'
                }
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#fff'
            },
            data: seriesData
          }
        ]
      }
      oChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-bind-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
        .noSelect{
            margin-top: 55px;
        }
    }

</style>
